<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>课程主页</title>
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="yes" name="apple-touch-fullscreen">
    <meta name="format-detection" content="telephone=no">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" />
    <meta http-equiv="keywords" name="keywords" content="" />
    <meta http-equiv="description" name="description" content="" />
    <link href="css/ydui.css" rel="stylesheet" />
<link href="https://cdn.bootcss.com/Swiper/4.3.0/css/swiper.min.css" rel="stylesheet">
<script src="js/ydui.flexible.js"></script>
	<link rel="stylesheet" type="text/css" href="css/all.css?v=201850002"/>
	<link rel="stylesheet" type="text/css" href="http://at.alicdn.com/t/font_379511_2nh3aa4tvsf.css"/>
</head>
	<body>
		<div class="g-flexview"  id="course" v-cloak>
       		<header class="m-navbar">
	            <div class="navbar-center">
	                <span class="navbar-title">{{datainfo.name}}</span>
	            </div>
        	</header>		
			<div class="g-scrollview">
				<div class="coureseinfo-text">
					<h1>课程简介</h1>
					<p v-html="datainfo.intro"></p>
				</div>
				<ul class="m-grids-4">
		            <li class="grids-item"  v-on:click="swiperslide(0)">
		            	<a >
							<div class="grids-icon">
			                    <i class="iconfont icon-jichu"></i>
			                </div>		            	
			                <div class="grids-txt">创业基础</div>
		                </a>
		            </li>
		            <li class="grids-item"  v-on:click="swiperslide(1)">
						<div class="grids-icon">
		                    <i class="iconfont icon-fenxi1"></i>
		                </div>			            	
		                <div class="grids-txt">案例分析</div>
		            </li>
		            <li class="grids-item"  v-on:click="swiperslide(2)">
						<div class="grids-icon">
		                    <i class="iconfont icon-guanxituiyankaobei"></i>
		                </div>			            	
		                <div class="grids-txt">沙盘推演</div>
		            </li>
		            <li class="grids-item"  v-on:click="swiperslide(3)">
						<div class="grids-icon">
		                    <i class="iconfont icon-weiluyan"></i>
		                </div>			            	
		                <div class="grids-txt">项目路演</div>
		            </li>
		        </ul>	
				<div class="coureseinfo-text"  style="margin-top: .2rem;margin-bottom: 0;padding-bottom: 0;">
					<h1 style="margin-bottom: 0;">{{type}}课程小节</h1>
				</div>		        
				<div class="coursexiaojie">
					<div class="swiper-wrapper">
						<div class="swiper-slide">
							<div class="m-cell">
					            <a  class="cell-item" v-for="(el,index) in courseStage" v-if="el.stageUnit.courseStage==0">
					                <div class="cell-left"><i class="iconfont icon-jichu"></i>{{el.stageUnit.name}}</div>
					                <div class="cell-right cell-arrow" v-on:click="setitem(el,'base')" v-if="index==0||el.isOpen">进入课程</div>
					                <div class="cell-right cell-arrow" v-else></div>
					            </a>
					        </div>								
						</div>	
						<div class="swiper-slide">
							<div class="m-cell">
					            <a class="cell-item" v-for="el in courseStage" v-if="el.stageUnit.courseStage==1">
					                <div class="cell-left"><i class="iconfont icon-fenxi1"></i>{{el.stageUnit.name}}</div>
					                <div class="cell-right cell-arrow"  v-if="el.isOpen" v-on:click="setitem(el,'case')">进入课程</div>
					                <div class="cell-right cell-arrow" v-else></div>
					            </a>
					        </div>								
						</div>	
						<div class="swiper-slide">
							<div class="m-cell">
					            <a class="cell-item">
					                <div class="cell-left"><i class="iconfont icon-guanxituiyankaobei"></i>沙盘推演</div>
					                <div class="cell-right cell-arrow"  v-on:click="setitem('','tui')">进入课程</div> <!--v-if="datainfo.courseStages[2].isOpen!=1"-->
					                <div class="cell-right cell-arrow" v-else></div>
					            </a>
					        </div>								
						</div>
						<div class="swiper-slide">
							<div class="m-cell">
					            <a class="cell-item">
					                <div class="cell-left"><i class="iconfont icon-weiluyan"></i>项目路演</div>
					                <div class="cell-right cell-arrow"  v-on:click="setitem('','road')" >进入课程</div><!-- v-if="datainfo.courseStages[3].isOpen!=1"-->
					                <div class="cell-right cell-arrow" v-else></div>
					            </a>
					        </div>								
						</div>						
					</div>
				</div>					
			</div>		
			<button type="button"  onclick="history.back()" class="btn-block btn-danger">返回课程</button>

		</div>
	</body>
    <script src="https://cdn.bootcss.com/jquery/2.2.0/jquery.min.js"></script>
	<script src="https://cdn.bootcss.com/Swiper/4.3.0/js/swiper.min.js"></script>
	<script src="js/ydui.js"></script>
    <script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script>

	<script src="js/all.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		$(document).ready(function(){				
		})
		var model= new Vue({
			el:'#course',
			data:{
				ID: ComFunJS.getQueryString("courseId"),
				datainfo:{},
				name:"",
				desc:"",		
				userId:ComFunJS.getCookie('userId'),
				courseStage:[],
				type:"创业基础"
			},
			methods:{	
				setitem:function(el,type){
					if(type=='base'){
						window.location.href='cousebase.html?'+'courseId='+model.ID+'&'+'unitId='+el.unitId						
					}
					if(type=='case'){
						localStorage.setItem('case',JSON.stringify(el))
						window.location.href='cousecase.html?'+'courseId='+model.ID+'&'+'unitId='+el.unitId						
					}	
					if(type=='tui'){
						localStorage.setItem('tui',JSON.stringify(model.datainfo.tuiyanCourse));
						localStorage.setItem('tuiscore',JSON.stringify(model.datainfo.tuiyanScore))
						window.location.href='cousetui.html?'+'courseId='+model.ID+'&'+'type='+model.stype				
					}	
					if(type=='road'){
						localStorage.setItem('road',JSON.stringify(model.datainfo.roadCourse));
						localStorage.setItem('roadscore',JSON.stringify(model.datainfo.roadScore))
						window.location.href='couseroad.html?'+'courseId='+model.ID+'&'+'type='+model.stype				
					}					
				},			
				getdatainfo:function(){
					this.$nextTick(function(){
						ComFunJS.getJSON(ComFunJS.APIURL('/course/'+model.ID),function(r){
							if(!r.error){						
								model.datainfo=r;
					            var swiper= new Swiper('.coursexiaojie', {
									on:{
										slideChange: function(){
										     if(this.activeIndex==0){
										     	model.type='创业基础';
										     }
										     if(this.activeIndex==1){
										     	model.type='案例分析';
										     }
										     if(this.activeIndex==2){
										     	model.type='沙盘推演';
										     }
										     if(this.activeIndex==3){
										     	model.type='项目路演';
										     }									     
										}										
									}
					            });							
							}
						})						
					})
				},
				getCourseStage:function(){
					this.$nextTick(function(){
						ComFunJS.getJSON(ComFunJS.APIURL('/course/student/unit/'),{courseId:model.ID,pageSize:200},function(r){
							if(!r.error){						
								model.courseStage=r.list;
								
							}
						})						
					})
				},				
				getteamInfo:function(){
					var _this= this;
					ComFunJS.getJSON(ComFunJS.APIURL('/course/student'),{courseId:_this.ID,userId:_this.userId},function(r){
						
					})
				},
				swiep:function(){
					swiper.slideTo(0, 1000,false)
				},
				swiperslide:function(index){
					var slideindex=index;
				     if(slideindex==0){
				     	window.location.reload();
				     	model.type='创业基础';
				     }
				     if(slideindex==1){
				     	model.type='案例分析';
				     }
				     if(slideindex==2){
				     	model.type='沙盘推演';
				     }
				     if(slideindex==3){
				     	model.type='项目路演';
				     }							
		            var swiper= new Swiper('.coursexiaojie', {
						on:{
							slideChange: function(){
							     if(this.activeIndex==0){
							     	model.type='创业基础';
							     }
							     if(this.activeIndex==1){
							     	model.type='案例分析';
							     }
							     if(this.activeIndex==2){
							     	model.type='沙盘推演';
							     }
							     if(this.activeIndex==3){
							     	model.type='项目路演';
							     }									     
							}										
						}	
		            });						
					swiper.slideTo(slideindex, 1000,false)
				}
			},
			mounted:function(){
				this.getdatainfo()
				this.getteamInfo()
				this.getCourseStage()
			}
		})
	</script>
</html>
